import ProSwitchButton from '@/components/pro-switch-button/index.vue'
import { ProFormOptions } from '@/components/pro-form/type'
import { Ref } from 'vue'
import { telValidatorFactory, usernameValidator } from '@/utils/validator'

type props = {
  handleType: Ref<'add' | 'edit' | ''>
  orgOptions: Ref<any[]>
}

export const useUserProForm = ({ handleType, orgOptions }: props) => {
  const [userForm, resetUserForm] = useProRef<Record<string, any>>({
    disable: false,
    accountNonLocked: true
  })
  const resetForm = () => {
    resetUserForm()
  }

  const userFormOptions = computed<ProFormOptions>(() => [
    {
      grid: {
        cols: '2',
        xGap: 30
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            label: '用户名',
            disabled: handleType.value === 'edit',
            key: 'userName',
            rule: {
              required: true,
              trigger: 'blur',
              validator: usernameValidator
            },
            placeholder: '请输入用户名',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '密码',
            visiable: handleType.value === 'add',
            key: 'password',
            rule: {
              required: true,
              trigger: ['input', 'blur']
            },
            placeholder: '请输入密码',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '真实姓名',
            key: 'realName',
            rule: {
              required: true,
              message: '请输入真实姓名',
              trigger: 'blur'
            },
            placeholder: '请输入真实姓名',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'select',
            label: '性别',
            key: 'sex',
            options: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '2'
              }
            ],
            rule: {
              required: true,
              message: '请选择性别',
              trigger: ['change']
            },
            placeholder: '请选择性别',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '手机号',
            key: 'phone',
            rule: {
              required: false,
              trigger: 'input',
              validator: telValidatorFactory(false)
            },
            placeholder: '请输入手机号',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'select',
            label: '所属部门',
            key: 'orgId',
            rule: {
              required: true,
              message: '请选择部门',
              trigger: ['change']
            },
            options: orgOptions.value,
            placeholder: '请选择部门',
            filterable: true
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '邮箱',
            key: 'email',
            placeholder: '请输入邮箱',
            clearable: true
          }
        },
        {
          formItem: {
            formType: 'custom',
            label: '是否禁用',
            key: 'disable',
            render() {
              return (
                <ProSwitchButton
                  v-model:value={userForm.value.disable}
                  checkedValue={1}
                  uncheckedValue={0}
                  checkedText="禁用"
                  uncheckedText="启用"
                />
              )
            }
          }
        }
      ]
    }
  ])

  return {
    userForm,
    userFormOptions,
    resetForm
  }
}
